<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置管理</title>
    {% load static %}
    <link href="{% static './layui/css/layui.css' %}" rel="stylesheet">
    <script src="{% static './layui/layui.js' %}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style type="text/css">
    #container{
        /*地图(容器)显示大小*/
        width:1200px;
        height:400px;
    }
    </style>
    <!--引入Javascript API GL，参数说明参见下文-->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body style="margin-top: 30px" onload="initMap()">
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label"><span style="color: red">*</span>经纬度</label>
    <div class="layui-input-block" style="width:400px">
      <input type="text" value="{{location_info.lat}},{{location_info.long}}" name="location" id="location" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <div id="container"></div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script>
layui.use(['form'], function(){
  var form = layui.form
  ,layer = layui.layer;

  //监听提交
  form.on('submit(demo1)', function(data){
      var location = data.field['location']
      $.ajax({
        method: "POST",
        url: "{%url 'xyss_admin:locationApi' %}",
        data: { location: location},
        success: function (res) {
            if(res['code'] == 0){
                layer.msg(res['msg']);
            }else{
                layer.msg(res['msg']);
            }
        },
        error: function(res) {
            console.log("失败了: " + res['msg']);
        }
      });
      return false;
  });
});
</script>
<script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(22.831834, 113.330076)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });

            var clickHandler=function(evt){
                var lat = evt.latLng.getLat().toFixed(6);
                var lng = evt.latLng.getLng().toFixed(6);
                console.log("您点击的的坐标是："+ lat + "," + lng);
                $("#location").val(lat + ',' + lng)
            }
            //Map实例创建后，通过on方法绑定点击事件
            map.on("click",clickHandler)
        }
    </script>
</html>